<template>
    <div
        class="tab-item"
        @click="blueColor"
        :style="{ color: isActive ? highLightColor : 'black' }"
    >
        <span
            class="iconfont"
            :class="[icon]"
            :style="{ color: isActive ? highLightColor : color }"
        ></span>
        <span class="label">{{ label }}</span>
        <span v-if="isDot" class="dot"></span>
        <span :class="{ msgNum: msgNum !== null }">{{ msgNum }}</span>
    </div>
</template>
<script setup>
import { ref, inject } from "vue";
const highLightColor = inject("highLightColor");
const props = defineProps({
    label: {
        type: String,
        default: "标签",
    },
    icon: {
        type: String,
        default: "icon-home",
    },
    isActive: {
        type: Boolean,
        default: false,
    },
    isDot: {
        typ: Boolean,
        default: false,
    },
    msgNum: {
        type: Number,
        default: null,
    },
    color: {
        color: String,
        default: "#333",
    },
});
const emits = defineEmits(["blueColor"]);
function blueColor() {
    emits("blueColor");
}
</script>

<style scoped>
.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
.tab-item .iconfont {
    font-size: 23px;
}
.tab-item .label {
    margin-top: 3px;
    font-size: 13px;
}
/* .active {
    color: #3494e4;
} */
.dot {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    background-color: red;
    border-radius: 50%;
}
.msgNum {
    position: absolute;
    top: -5px;
    right: -5px;
    padding: 2px 5px;
    background-color: red;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 10px;
}
</style>
